<template>
  <div class="profile-container">
    <h2>个人中心</h2>
    <div class="avatar-upload">
      <img :src="user.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" class="avatar" />
      <el-upload
        action="http://placeholder/api/upload"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload">
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
    </div>
    <form @submit.prevent="handleUpdate">
      <div class="form-group">
        <label>用户名</label>
        <el-input v-model="user.username" type="text" required />
      </div>
      <div class="form-group">
        <label>昵称</label>
        <el-input v-model="user.nickname" type="text" />
      </div>
      <div class="form-group">
        <label>手机号</label>
        <el-input v-model="user.phone" type="text" />
      </div>
      <div class="form-group">
        <label>邮箱</label>
        <el-input v-model="user.email" type="email" />
      </div>
      <div class="form-group">
        <label>地址</label>
        <el-input v-model="user.address" type="text" placeholder="学校公寓名+几栋+门牌号" />
      </div>
      <el-button type="primary" native-type="submit" class="submit-btn">保存修改</el-button>
    </form>
  </div>
</template>

<script>
import { userApi } from '@/utils/request'
export default {
  name: 'Profile',
  data() {
    return {
      user: {
        username: '',
        nickname: '',
        phone: '',
        email: '',
        avatar: '',
        address: ''
      }
    }
  },
  created() {
    this.fetchUser();
  },
  methods: {
    fetchUser() {
      userApi.getUserInfo().then(res => {
        if (res && res.data && res.data.data) {
          this.user = res.data.data;
        }
      }).catch(err => {
        console.error('获取用户信息失败:', err);
      });
    },
    handleUpdate() {
      userApi.updateUserInfo(this.user).then(() => {
        this.$message.success('修改成功');
        // userApi.updateUserInfo 已保证 id 为字符串
        localStorage.setItem('userInfo', JSON.stringify({...this.user, id: String(this.user.id)}));
      }).catch(err => {
        console.error('修改用户信息失败:', err);
      });
    },
    handleAvatarSuccess(res) {
      this.user.avatar = res.url
      this.$message.success('头像上传成功')
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>

<style scoped>
.profile-container {
  max-width: 500px;
  margin: 60px auto;
  padding: 30px;
  border: 1px solid #eee;
  border-radius: 8px;
  background: #fff;
}
.avatar-upload {
  text-align: center;
  margin-bottom: 20px;
}
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 10px;
}
.form-group {
  margin-bottom: 18px;
}
.submit-btn {
  width: 100%;
  margin-top: 20px;
}
</style>